<route>{meta: {title: 'H5文件查找'}}</route>
<template>
  <Page>
    <el-form ref="form" :model="data" label-width="120px" :rules="rules">
      <el-form-item label="项目路径" prop="filePath">
        <el-button @click="selectFilePath" type="primary">选择项目文件路径</el-button>
        {{data.filePath}}
      </el-form-item>
      <el-form-item label="搜索文件类型">
        <el-checkbox-group v-model="data.extensions">
          <el-checkbox label=".js"></el-checkbox>
          <el-checkbox label=".vue"></el-checkbox>
          <el-checkbox label=".html"></el-checkbox>
        </el-checkbox-group>
      </el-form-item>
      <el-form-item label="搜索内容" prop="content">
        <el-input v-model="data.content"></el-input>
      </el-form-item>
      <el-form-item label="追加域名" prop="hasDomain">
        <el-checkbox v-model="data.hasDomain" :label="domain"></el-checkbox>
      </el-form-item>
      <el-form-item>
        <el-button type="primary"  @click="search">确定</el-button>
      </el-form-item>
    </el-form>
    <div class="tool">
      <div class="title">搜索结果:{{currentPath}}</div>
      <div class="export">
        <el-button type="primary" @click="exportFile">导出</el-button>
      </div>
    </div>
    <div class="result">
      <Scrollbar>
        <div class="result-list">
          <div v-if="resultList.length <= 0">暂无内容</div>
          <template v-else>
            <div class="item" v-for="item in resultList" :key="item">{{item}}</div>
          </template>
        </div>
      </Scrollbar>
    </div>
  </Page>
</template>

<script>
import Page from '@/components/Page';
import { ipcRenderer } from 'electron';
import file from '@/native/file';
import Scrollbar from '@/components/Scrollbar';
import path from 'node:path';
import dialog from '@/util/dialog';

/**
 Author: 蒋鑫强
 Time: 2023/6/6
 Description:
 */
export default {
  name: "fileSearch",
  components: {Scrollbar, Page},
  data() {
    return {
      data: {
        filePath: '',
        extensions: ['.js', '.vue', '.html'],
        content: '',
        hasDomain: false
      },
      domain: 'https://citic.cmread.com',

      resultList: [],
      currentPath: '',

      rules: {
        filePath: [{required: true,message: '请选择项目路径',trigger: 'blur'}],
        content: [{required: true,message: '请输入搜索内容',trigger: 'change'}],
      }
    }
  },

  methods: {
    selectFilePath() {
      ipcRenderer.send('open-directory-dialog');
      ipcRenderer.on('get-directory-dialog', (event, path) => {
        this.data.filePath = path;
      });
    },

    search() {
      this.$refs.form.validate(valid => {
        if (valid) {
          this.resultList = [];
          file.findFile(this.data.filePath, this.data.extensions, (data, dir, isFinish) => {
            this.currentPath = dir;
            this.timer && clearTimeout(this.timer);
            const reg = new RegExp(this.data.content, 'ig');
            const result = data.match(reg);
            if (result && result.length > 0) {
              dir = dir.replace(this.data.filePath, '');
              dir = dir.split(path.sep).join('/');
              if (this.data.hasDomain) {
                dir = `${this.domain}${dir}`;
              }
              this.resultList.push(dir);
            }

            if (isFinish) {
              this.currentPath = '';
            }
          });
        }
      });
    },

    exportFile() {
      if (this.resultList.length <= 0) {
        dialog.alert('没有需要导出的内容');
      } else {
        file.downloadFileByText('filePath.txt', this.resultList.join('\n'));
      }
    }
  }
}
</script>

<style lang="less" scoped>
 .result {
   flex: 1;
   overflow: hidden;
   border: 1px solid #f1f1f1;
 }

 .tool {
   display: flex;
   justify-content: space-between;
   margin-bottom: 10px;
 }

 .result-list {
   padding: 10px;
   font-size: 12px;

   .item {
     word-break: break-all;
   }
 }
</style>
